<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="验证手机号" placeholder bgColor="#fff"></u-navbar>
    <view class="content" v-if="flag">
      <view class="input-box">
        <view class="input-item">
          <view>原手机号</view>
          <input type="number" disabled maxlength="11" v-model="userInfo.phonenumber" placeholder="请输入手机号"/>
        </view>
        <view class="input-item" style="border: none;">
          <view>验证码</view>
          <view class="u-flex">
            <input type="number" maxlength="6" v-model="userInfo.code" placeholder="请输入验证码"/>
            <view class="get-code" @click="sendCode(1)">{{ codeTime != 0 ? `重新获取(${codeTime}s)` :'获取验证码'}}</view>
          </view>
        </view>
      </view>
      <view class="btn" @click="submit(1)">下一步</view>
    </view>
    <view class="content" v-else>
      <view class="input-box">
        <view class="input-item">
          <view>新手机号</view>
          <input type="number" maxlength="11" v-model="userInfo.phonenumber" placeholder="请输入手机号"/>
        </view>
        <view class="input-item" style="border: none;">
          <view>验证码</view>
          <view class="u-flex">
            <input type="number" maxlength="6" v-model="userInfo.code" placeholder="请输入验证码"/>
            <view class="get-code" @click="sendCode(2)">{{ codeTime != 0 ? `重新获取(${codeTime}s)` :'获取验证码'}}</view>
          </view>
        </view>
      </view>
      <view class="btn" @click="submit(2)">确认提交</view>
    </view>
  </view>
</template>

<script>
import { editPhoneBefore, editPhone, sendRegisterCode, sendEditCode } from '@/api/index'
import { phoneReg } from '@/common/util'
let times = null

export default {
  data() {
    return {
      flag: true,
      codeTime: 0,
      userInfo: {},
    };
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
    if(!this.userInfo.phonenumber) {
      this.flag = false
    }
  },
  methods: {
    sendCode(type) {
      const that = this
      if(!phoneReg(that.userInfo.phonenumber)) {
        return
      }
      if(that.codeTime != 0) {
        return
      }
      if(times) {
        clearInterval(times)
        times = null
      }
      if(type == 1) {
        sendRegisterCode({phoneNumber: that.userInfo.phonenumber}).then(res => {
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
          that.codeTime = 120
          times = setInterval(() => {
            if(that.codeTime == 0) {
              clearInterval(times)
              times = null
              return
            }
            that.codeTime = that.codeTime - 1
          }, 1000)
        })
      } else if(type == 2) {
        sendEditCode({phoneNumber: that.userInfo.phonenumber}).then(res => {
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
          that.codeTime = 120
          times = setInterval(() => {
            if(that.codeTime == 0) {
              clearInterval(times)
              times = null
              return
            }
            that.codeTime = that.codeTime - 1
          }, 1000)
        })
      }
    },
    submit(type) {
      if(type == 1) {
        const that = this
        if(!phoneReg(that.userInfo.phonenumber)) {
          return
        }
        delete this.userInfo.roles
        editPhoneBefore(this.userInfo).then(res => {
          if(res.data.code === 200) {
            if(this.times) {
              clearInterval(times)
              times = null
            }
            delete this.userInfo.phonenumber
            delete this.userInfo.code
            this.flag = false
            that.codeTime = 0
          } else {
            uni.showToast({
              icon: 'none',
              title: res.data.msg
            })
          }
        })
      } else if(type == 2) {
        const that = this
        if(!phoneReg(that.userInfo.phonenumber)) {
          return
        }
        delete this.userInfo.roles
        editPhone(this.userInfo).then(res => {
          if(res.data.code === 200) {
            uni.showToast({
              icon: 'none',
              title: `修改成功`
            })
            setTimeout(() => {
              that.goBack()
            }, 1000)
          } else {
            uni.showToast({
              icon: 'none',
              title: res.data.msg
            })
          }
        })
      }
    }
  },
  beforeDestroy() {
    if(times) {
      clearInterval(times)
      times = null
      this.codeTime = 0
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .content {
    width: 702rpx;
    margin: 0 auto;
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .input-box {
      width: 100%;
      padding: 0 22rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      margin-bottom: 120rpx;
      .input-item {
        width: 100%;
        padding: 28rpx 0;
        border-bottom: 2rpx solid #E1E1E1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #000000;
      }
      input {
        width: 270rpx;
        color: #818181;
        text-align: right;
      }
      .get-code {
        color: #53BE07;
        padding-left: 22rpx;
        border-left: 2rpx solid #53BE07;
        margin-left: 22rpx;
      }
    }
    .btn {
      width: 440rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      background: #56CB03;
      border-radius: 200rpx;
      border: 2rpx solid #56CB03;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
}
</style>
